baloon pop over

말풍선 아이콘은 웹 페이지를 만들 때에 언제나 뭔가 부족하죠. 그 부족함을 시원하게 채워줄 프로젝트입니다. 용량은 놀랍게도. 3.5kb! 가볍고 쓰기 편한 라이브러리. lpad 처럼 간단하게 만들 수 있는 것은 만들자! 가 요즘의 트렌드임에도 불구하고 소개하는 것은 제가 간단하게 짤 수 있을 거 같은 자신이 없어서 그런 것은 아닙니다(?)

2016/04/08 Editor’s choice

FezVrasta/popper.js
_popper.js - A ~3.5KB kickass library to manage your poppers_github.com

설치

npm install popper.js --save

bower도 존재하고, CDN 도 있습니다.

‘jsDelivr - A free super-fast CDN for developers and webmasters‘
A free super-fast CDN for developers and webmasterswww.jsdelivr.com

실행

어떻게 사용할 수 있을까요?

Readme에 있는 코드는 다음과 같습니다.

var reference = document.querySelector('.my-button');  
var thePopper = new Popper(  
reference,  
{  
content: 'My awesome popper!'  
},  
{  
// popper options here  
}  
});

하지만, 이렇게 만 가지고는 짤 수 없죠.

기존에 만들고 있던 resume page 사진에 장난을 걸어봤습니다.

다음과 같이 보여지네요.

개쿨.

생각하던 것 이상으로 간단하지만

그 이상 이쁜 팝오버네요!

By Keen Dev on April 7, 2016.

Exported from Medium on May 31, 2017.